@import "../../styles/_variables";
@import "../../styles/_mixins";

.react-tabs__tab-panel  {
  display: none;
  flex-direction: column;
  height: 100%;
  overflow: hidden;

  > pre[class*=language-] {
    margin: 0;
    height: 100%;
    background-color: #282c34 !important;
  }

  > iframe {
    height: 100%;
  }
}

.empty-panel {
  display: flex;
  width: 100%;
  height: 100%;
  background-color: var(--background-color);
  justify-content: center;
  align-items: center;
}

.react-tabs__tab-list {
  display: flex;
  flex-direction: row;
  flex-grow: 0;
  flex-shrink: 0;
  height: auto;
  line-height: 35px;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  background-color: var(--container-color);
  font-size: 14px;
  border-bottom: 1px solid var(--playground-border);

  @include dark-mode {
    background-color: rgba(255, 255, 255, 0.2);
  }

  li {
    padding: 0 10px;
    border-right: 1px solid var(--hard-border-color);
    flex-shrink: 0;

    &:hover {
      cursor: pointer;
      background-color: rgba(0, 0, 0, 0.1);
    }
  }
}

.react-tabs__tab--selected {
  font-weight: bold;
  background-color: rgba(0, 0, 0, 0.1);
}

.react-tabs__tab-panel--selected {
  display: flex;
}
